<template>
    <div id="cards" style="color: #fff;">
      <div class="card-item">
        <div class="card-header">
          <div class="card-header-left">本月用电</div>
        </div>
        <div class="ring-charts">
          <span class="ring-charts-p">562,958 </span>kwh
        </div>
        <div class="card-footer">
          <div class="card-footer-item">
            <div class="footer-title">月均用电</div>
            <div class="footer-detail">195,015 kwh</div>
          </div>
          <div class="card-footer-item">
            <div class="footer-title">本年累计</div>
            <div class="footer-detail">1,170,087kwh</div>
          </div>
        </div>
      </div>
      <div class="card-item">
        <div class="card-header">
          <div class="card-header-left">本月电费</div>
        </div>
        <div class="ring-charts">
          <span class="ring-charts-p">39.97 </span>万元
        </div>
        <div class="card-footer">
          <div class="card-footer-item">
            <div class="footer-title">月均电费</div>
            <div class="footer-detail">13.85 万元</div>
          </div>
          <div class="card-footer-item">
            <div class="footer-title">本年累计</div>
            <div class="footer-detail">83.08 万元</div>
          </div>
        </div>
      </div>
      <div class="card-item">
        <div class="card-header">
          <div class="card-header-left">本月排放(标煤)</div>
        </div>
        <div class="ring-charts">
          <span class="ring-charts-p">121 </span>T
        </div>
        <div class="card-footer">
          <div class="card-footer-item">
            <div class="footer-title">月均排放</div>
            <div class="footer-detail">52 T</div>
          </div>
          <div class="card-footer-item">
            <div class="footer-title">本年累计</div>
            <div class="footer-detail">309 T</div>
          </div>
        </div>
      </div>
      <div class="card-item">
        <div class="card-header">
          <div class="card-header-left">本月排放(CO2)</div>
        </div>
        <div class="ring-charts">
          <span class="ring-charts-p">480 </span>T
        </div>
        <div class="card-footer">
          <div class="card-footer-item">
            <div class="footer-title">月均排放</div>
            <div class="footer-detail">191 T</div>
          </div>
          <div class="card-footer-item">
            <div class="footer-title">本年累计</div>
            <div class="footer-detail">1147 T</div>
          </div>
        </div>
      </div>
    </div>
  </template>
   
  <script>
  export default {
    name: 'IndexTop',
    data () {
      return {
        cards: []
      }
    },
    methods: {
      createData () {
        const { randomExtend } = this
        this.cards = new Array(5).fill(0).map((foo, i) => ({
          title: '风力电厂' + (i + i),
          total: {
            number: [randomExtend(9000, 10000)],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#ea6027',
              fontWeight: 'bold'
            }
          },
          num: {
            number: [randomExtend(30, 60)],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#26fcd8',
              fontWeight: 'bold'
            }
          },
          ring: {
            series: [
              {
                type: 'gauge',
                startAngle: -Math.PI / 2,
                endAngle: Math.PI * 1.5,
                arcLineWidth: 13,
                radius: '80%',
                data: [
                  { name: '资金占比', value: randomExtend(40, 60) }
                ],
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                  show: false
                },
                backgroundArc: {
                  style: {
                    stroke: '#224590'
                  }
                },
                details: {
                  show: true,
                  formatter: '资金占比{value}%',
                  style: {
                    fill: '#1ed3e5',
                    fontSize: 20
                  }
                }
              }
            ],
            color: ['#03d3ec']
          }
        }))
      },
      randomExtend (minNum, maxNum) {
        if (arguments.length === 1) {
          return parseInt(Math.random() * minNum + 1, 10)
        } else {
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
        }
      }
    },
    mounted () {
      const { createData } = this
   
      createData()
   
      setInterval(this.createData, 1000)
    }
  }
  </script>
   
  <style lang="less">
  #cards {
    display: flex;
    justify-content: space-between;
    height: 45%;
    
    .card-item {
      background-color: rgba(10, 29, 50, 0.8);
      border-top: 2px solid rgba(1, 153, 209, .5);
      width: 100%;
      display: inline-flex;
      flex-direction: column;
    }
   
    .card-header {
      display: flex;
      height: 20%;
      align-items: center;
      justify-content: space-between;
   
      .card-header-left {
        font-size: 28px;
        font-weight: bold;
        padding-left: 20px;
      }
   
      .card-header-right {
        padding-right: 20px;
        font-size: 50px;
        color: #03d3ec;
      }
    }
   
    .ring-charts {
      margin-left: 20px;
    }
    .ring-charts-p{
      font-size: 38px;
      margin-bottom: 0px;
    }
   
    .card-footer {
      height: 25%;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
   
    .card-footer-item {
      padding: 5px 10px 0px 10px;
      box-sizing: border-box;
      width: 40%;
      background-color: rgba(0, 44, 81, 1);
      border-radius: 3px;
   
      .footer-title {
        font-size: 25px;
        margin-bottom: 5px;
      }
   
      .footer-detail {
        font-size: 30px;
        color: #1294fb;
        display: flex;
        font-size: 28px;
        align-items: center;
   
        .dv-digital-flop {
          margin-right: 5px;
        }
      }
    }
  }
  </style>